<template>
  <div>
    <div class="line"></div>
    <div class="card-wra" @click="handleDetail">
      <div class="title flex-ac between">
        <div class="l flex-ac">
          <img :src="record.imageUrl" alt="" />
          <span>{{ record.customOrderNo }}</span>
        </div>
        <div class="r">
          <Tag
            :type="OrderStatusTypeTag[record.totalStatus]"
            :plain="record.totalStatus === '部分成功'">
            {{ record.totalStatus }}
          </Tag>
        </div>
      </div>
      <div class="content flex-ac">
        <div class="l">
          <img :src="record.imageUrl" alt="" />
        </div>
        <div class="r">
          <div class="r-title">
            {{ record.cardProductName }}
          </div>
          <div class="oldP">
            面值：{{ record.cardFacevalue }}元
          </div>
        </div>
      </div>
      <div class="time flex-ac between">
        <div class="l">
          {{ record.customCreateTime }}
        </div>
        <div class="r">
          <span
            class="num">{{ '共' + record.totalCount + '张' }}</span>
          <span class="num">合计：</span><span
            class="price">¥{{ record.totalAmount
            }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { Tag } from 'vant';
import type { PropType } from 'vue';
import { useRouter } from 'vue-router';

import { OrderStatusTypeTag } from '../const';
import CardOrderItem from '../models/CardOrderItem';

const props = defineProps({
  record: {
    type: Object as PropType<CardOrderItem>,
    default: () => ({}),
  },
});

const router = useRouter();
const handleDetail = () => {
  router.replace({ name: 'RecordDetail', params: { id: props.record.customOrderNo } });
  // eslint-disable-next-line no-console
  console.log(props.record);
};

</script>
<style scoped lang="less">
.flex {
  display: flex;
}

.flex-ac {
  display: flex;
  align-items: center;
}

.between {
  justify-content: space-between;
}

.card-wra {
  background-color: #fff;
}

.title {
  padding: 6px 20px;
  border-bottom: 1px solid rgb(231, 226, 226);

  .l {
    img {
      border-radius: 50%;
      width: 42px;
      height: 42px;
      margin-right: 10px;
      object-fit: contain;
    }

    span {
      color: #565454;
      font-size: 14px;
    }
  }

  .r {
    color: #565454;
    font-size: 14px;
  }
}

.content {
  padding: 6px 20px;

  .l {
    img {
      width: 64px;
      height: 64px;
      margin-right: 10px;
      object-fit: contain;
    }
  }

  .r {
    .r-title {
      color: #444141;
      font-size: 14px;
    }

    .oldP {
      margin-top: 6px;
      color: #706e6e;
      font-size: 12px;
    }

    .nowP {
      margin-top: 4px;
      color: red;
      font-size: 16px;

      span {
        color: #706e6e;
        font-size: 12px;
      }
    }
  }
}

.time {
  padding: 0px 20px;
  margin-bottom: 10px;

  .l {
    color: #706e6e;
    font-size: 12px;
  }

  .r {
    .num {
      color: #706e6e;
      font-size: 12px;
    }

    .price {
      color: red;
      font-size: 16px;
    }
  }
}

.line {
  height: 14px;
  background-color: #f5f5f5;
}
</style>
